<div class="flex items-center space-x-2 mb-6">
  <FlightIcon @name="collections" @size="24" />
  <h2
    class="hds-typography-display-300 hds-font-weight-semibold hds-foreground-strong"
  >Latest updates</h2>
</div>

<div class="flex" {{did-insert (perform this.didInsert)}}>
  <X::HdsTab
    @label="New docs"
    @icon="star"
    @isSelected={{eq this.currentTab "new"}}
    @action={{fn this.setCurrentTab "new"}}
  />
  <X::HdsTab
    @label="In review"
    @icon="circle-half"
    @isSelected={{eq this.currentTab "in-review"}}
    @action={{fn this.setCurrentTab "in-review"}}
  />
  <X::HdsTab
    @label="Approved"
    @icon="check-circle"
    @isSelected={{eq this.currentTab "approved"}}
    @action={{fn this.setCurrentTab "approved"}}
  />
</div>
{{#if this.didInsert.isRunning}}
  {{! Approximate height of the tile list }}
  <div class="h-[350px]">
    <FlightIcon @name="loading" class="mt-8" />
  </div>
{{else}}
  {{#if this.docsToShow}}
    <div class="tile-list mt-8">
      {{#each this.docsToShow as |doc|}}
        <Doc::Tile
          @avatar={{get doc.ownerPhotos 0}}
          @docID={{doc.objectID}}
          @docNumber={{doc.docNumber}}
          @modifiedAgo={{doc.modifiedAgo}}
          @owner={{get doc.owners 0}}
          @productArea={{doc.product}}
          @status={{lowercase doc.status}}
          @thumbnail={{doc.googleMetadata.thumbnailLink}}
          @title={{doc.title}}
        />
      {{/each}}
    </div>
  {{else}}
    <div class="text-display-200 mt-8">
      {{this.emptyStateMessage}}
    </div>
  {{/if}}
{{/if}}
